<template>
  <popup v-model="showModal" position="bottom" width="100%" height="100%" style="z-index: 999">
    <view-header head-title="选择" style="background: #fff" :prevent-go-back="true"
                 :click-back="()=>{$emit('input', false)}">
        <index-list ref="indexList"  v-once class="mescroll-touch">
          <div class="mescroll-touch">
            <index-section index="*" class="list">
              <flexbox class="item">
                <flexbox-item class="tit" @click.native="selectItem">不限</flexbox-item>
              </flexbox>
            </index-section>
            <index-section class="list" :index="item+''" v-for="item in 10" :key="item">
              <div @click="selectItem(item)">{{item}}</div>
            </index-section>
          </div>
        </index-list>
    </view-header>
  </popup>
</template>

<script>
  import IndexList from '../../plugin_components/index-list/index-list'
  import IndexSection from '../../plugin_components/index-list/index-section'

  import {Popup} from 'vux'
  import ViewHeader from '../../components/headTop/ViewHeader.vue'

  export default {
    name: 'brandIndex',
    props: {
      value: Boolean,
    },
    data () {
      return {
        showModal: false,
        dataList: []
      }
    },
    watch: {
      value (val) {
        val ? this.onShow() : this.onHide()
      }
    },
    components: {IndexSection, IndexList, Popup, ViewHeader},
    computed: {},
    methods: {
      onShow () {
        this.$nextTick(() => {
          this.showModal = true
        })
      },
      onHide () {
        this.showModal = false
      },
      selectItem (item) {
        this.onHide()
        this.$emit('on-select', item)
        this.$emit('input', false)
      },
    },
    created () {
      if (this.value) {
        this.showModal = true
      }
    },
    mounted () {
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/theme.less";

  .list {
    img {
      vertical-align: middle;
      alignment: center;
      text-align: center;
      width: 1rem;
      height: 1rem;
    }
    .hot-item {
      background: #fff;
      text-align: center;
      padding: .3rem 0;
      &:hover {
        background: #f7f7f7;
      }
    }
    .item {
      height: 1.5rem;
      line-height: 1.5rem;
      background: #fff;
      box-sizing: border-box;
      padding: 0 .3rem 0 .3rem;
      overflow: hidden;
      text-align: center;
      border-bottom: .01rem solid #f7f7f7;
      &:hover {
        background: #f1f1f1;
      }
      .tit {
        text-align: left;
        font-size: @font-size-normal
      }
    }
  }
</style>
